21 augusti 2025Svenska

En djupdykning i JavaScript Decorators som utforskar deras syntax, användningsfall för metadataprogrammering, bästa praxis och inverkan på kodens underhållbarhet. Inkluderar praktiska exempel och framtidsutsikter.

JavaScript Decorators: Implementering av Metadataprogrammering

JavaScript Decorators är en kraftfull funktion som låter dig lägga till metadata och ändra beteendet hos klasser, metoder, egenskaper och parametrar på ett deklarativt och återanvändbart sätt. De är ett "stage 3"-förslag i ECMAScripts standardiseringsprocess och används flitigt med TypeScript, som har sin egen (något annorlunda) implementation. Denna artikel ger en omfattande översikt av JavaScript Decorators, med fokus på deras roll i metadataprogrammering och illustrerar deras användning med praktiska exempel.

Vad är JavaScript Decorators?

Decorators är ett designmönster som förstärker eller modifierar funktionaliteten hos ett objekt utan att ändra dess struktur. I JavaScript är decorators speciella typer av deklarationer som kan kopplas till klasser, metoder, accessorer, egenskaper eller parametrar. De använder symbolen @ följt av en funktion som kommer att exekveras när det dekorerade elementet definieras.

Tänk på decorators som funktioner som tar det dekorerade elementet som indata och returnerar en modifierad version av det elementet, eller utför någon sidoeffekt baserat på det. Detta ger ett rent och elegant sätt att lägga till funktionalitet utan att direkt ändra den ursprungliga klassen eller funktionen.

Nyckelkoncept:

Decorator-funktion: Funktionen som föregås av symbolen @. Den tar emot information om det dekorerade elementet och kan modifiera det.
Dekorerat element: Klassen, metoden, accessorn, egenskapen eller parametern som dekoreras.
Metadata: Data som beskriver data. Decorators används ofta för att associera metadata med kodelement.

Syntax och struktur

Den grundläggande syntaxen för en decorator är som följer:

@decorator
class MyClass {
  // Klassmedlemmar
}

Här är @decorator decorator-funktionen och MyClass den dekorerade klassen. Decorator-funktionen anropas när klassen definieras och kan komma åt och modifiera klassdefinitionen.

Decorators kan också ta emot argument, som skickas till själva decorator-funktionen:

@loggable(true, "Custom Message")
class MyClass {
  // Klassmedlemmar
}

I detta fall är loggable en decorator-fabrik (decorator factory), en funktion som tar emot argument och returnerar den faktiska decorator-funktionen. Detta möjliggör mer flexibla och konfigurerbara decorators.

Typer av Decorators

Det finns olika typer av decorators, beroende på vad de dekorerar:

Klassdecorators: Används på klasser.
Metoddecorators: Används på metoder inom en klass.
Accessordecorators: Används på getter- och setter-accessorer.
Egenskapsdecorators: Används på klassegenskaper.
Parameterdecorators: Används på parametrar till en metod.

Klassdecorators

Klassdecorators används för att modifiera eller förstärka en klass beteende. De tar emot klassens konstruktor som ett argument och kan returnera en ny konstruktor för att ersätta den ursprungliga. Detta gör det möjligt att lägga till funktionalitet som loggning, dependency injection eller state management.

Exempel:

function loggable(constructor: Function) {
  console.log("Class " + constructor.name + " was created.");
}

@loggable
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Utskrift: Class User was created.

I detta exempel loggar loggable-decoratorn ett meddelande till konsolen varje gång en ny instans av User-klassen skapas. Detta kan vara användbart för felsökning eller övervakning.

Metoddecorators

Metoddecorators används för att modifiera beteendet hos en metod inom en klass. De tar emot följande argument:

target: Klassens prototyp.
propertyKey: Metodens namn.
descriptor: Egenskapsdeskriptorn för metoden.

Deskriptorn låter dig komma åt och modifiera metodens beteende, som att omsluta den med ytterligare logik eller omdefiniera den helt.

Exempel:

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Skriver ut loggar för metodanropet och returvärdet

I detta exempel loggar logMethod-decoratorn metodens argument och returvärde. Detta kan vara användbart för felsökning och prestandaövervakning.

Accessordecorators

Accessordecorators liknar metoddecorators men appliceras på getter- och setter-accessorer. De tar emot samma argument som metoddecorators och låter dig modifiera accessorns beteende.

Exempel:

function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalSet = descriptor.set;

  descriptor.set = function (value: any) {
    if (value < 0) {
      throw new Error("Value must be non-negative.");
    }
    originalSet.call(this, value);
  };
}

class Temperature {
  private _celsius: number;

  constructor(celsius: number) {
    this._celsius = celsius;
  }

  @validate
  set celsius(value: number) {
    this._celsius = value;
  }

  get celsius(): number {
    return this._celsius;
  }
}

const temperature = new Temperature(25);
temperature.celsius = 30; // Giltigt
// temperature.celsius = -10; // Kastar ett fel

I detta exempel säkerställer validate-decoratorn att temperaturvärdet inte är negativt. Detta kan vara användbart för att upprätthålla dataintegritet.

Egenskapsdecorators

Egenskapsdecorators används för att modifiera beteendet hos en klassegenskap. De tar emot följande argument:

target: Klassens prototyp (för instansegenskaper) eller klassens konstruktor (för statiska egenskaper).
propertyKey: Egenskapens namn.

Egenskapsdecorators kan användas för att definiera metadata eller modifiera egenskapens deskriptor.

Exempel:

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readonly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();
// config.apiUrl = "https://newapi.example.com"; // Kastar ett fel i strict mode

I detta exempel gör readonly-decoratorn egenskapen apiUrl skrivskyddad, vilket förhindrar att den modifieras efter initialisering. Detta kan vara användbart för att definiera oföränderliga konfigurationsvärden.

Parameterdecorators

Parameterdecorators används för att modifiera beteendet hos en metodparameter. De tar emot följande argument:

target: Klassens prototyp (för instansmetoder) eller klassens konstruktor (för statiska metoder).
propertyKey: Metodens namn.
parameterIndex: Parameterns index i metodens parameterlista.

Parameterdecorators är mindre vanliga än andra typer av decorators, men de kan vara användbara för att validera inmatningsparametrar eller injicera beroenden.

Exempel:

function required(target: any, propertyKey: string, parameterIndex: number) {
  const existingRequiredParameters: number[] = Reflect.getOwnMetadata(propertyKey, target, "required") || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata(propertyKey, existingRequiredParameters, target, "required");
}

function validateMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function () {
    let requiredParameters: number[] = Reflect.getOwnMetadata(propertyName, target, "required");
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (arguments[parameterIndex] === null || arguments[parameterIndex] === undefined) {
          throw new Error(`Missing required argument at index ${parameterIndex}`);
        }
      }
    }

    return method.apply(this, arguments);
  };
}


class ArticleService {
  create(
    @required title: string,
    @required content: string
  ): void {
    console.log(`Creating article with title: ${title} and content: ${content}`);
  }
}

const service = new ArticleService();
// service.create("My Article", null); // Kastar ett fel
service.create("My Article", "Article Content"); // Giltigt

I detta exempel markerar required-decoratorn parametrar som obligatoriska, och validateMethod-decoratorn säkerställer att dessa parametrar inte är null eller undefined. Detta kan vara användbart för att upprätthålla validering av metodens indata.

Metadataprogrammering med Decorators

Ett av de mest kraftfulla användningsfallen för decorators är metadataprogrammering. Metadata är data om data. I programmeringssammanhang är det data som beskriver strukturen, beteendet och syftet med din kod. Decorators ger ett rent och deklarativt sätt att associera metadata med klasser, metoder, egenskaper och parametrar.

Reflect Metadata API

Reflect Metadata API är ett standard-API som låter dig lagra och hämta metadata associerad med objekt. Det tillhandahåller följande funktioner:

Reflect.defineMetadata(key, value, target, propertyKey): Definierar metadata för en specifik egenskap hos ett objekt.
Reflect.getMetadata(key, target, propertyKey): Hämtar metadata för en specifik egenskap hos ett objekt.
Reflect.hasMetadata(key, target, propertyKey): Kontrollerar om metadata finns för en specifik egenskap hos ett objekt.
Reflect.deleteMetadata(key, target, propertyKey): Raderar metadata för en specifik egenskap hos ett objekt.

Du kan använda dessa funktioner tillsammans med decorators för att associera metadata med dina kodelement.

Exempel: Definiera och hämta metadata

import 'reflect-metadata';

const logKey = "log";

function log(message: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    Reflect.defineMetadata(logKey, message, target, key);

    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      console.log(Reflect.getMetadata(logKey, target, key));
      const result = originalMethod.apply(this, args);
      return result;
    }

    return descriptor;
  }
}

class Example {
  @log("Executing method")
  myMethod(arg: string): string {
    return `Method called with ${arg}`;
  }
}

const example = new Example();
example.myMethod("Hello"); // Utskrift: Executing method, Method called with Hello

I detta exempel använder log-decoratorn Reflect Metadata API för att associera ett loggmeddelande med metoden myMethod. När metoden anropas hämtar och loggar decoratorn meddelandet till konsolen.

Användningsfall för Metadataprogrammering

Metadataprogrammering med decorators har många praktiska tillämpningar, inklusive:

Serialisering och Deserialisering: Annotera egenskaper med metadata för att styra hur de serialiseras eller deserialiseras till/från JSON eller andra format. Detta kan vara användbart vid hantering av data från externa API:er eller databaser, särskilt i distribuerade system som kräver dataomvandling mellan olika plattformar (t.ex. konvertering av datumformat mellan olika regionala standarder). Föreställ dig en e-handelsplattform som hanterar internationella leveransadresser, där du kan använda metadata för att specificera korrekt adressformat och valideringsregler för varje land.
Dependency Injection: Använd metadata för att identifiera beroenden som behöver injiceras i en klass. Detta förenklar hanteringen av beroenden och främjar lös koppling. Tänk på en mikrotjänstarkitektur där tjänster är beroende av varandra. Decorators och metadata kan underlätta dynamisk injektion av tjänsteklienter baserat på konfiguration, vilket möjliggör enklare skalning och feltolerans.
Validering: Definiera valideringsregler som metadata och använd decorators för att automatiskt validera data. Detta säkerställer dataintegritet och minskar repetitiv kod (boilerplate). Till exempel måste en global finansapplikation följa olika regionala finansiella regler. Metadata kan definiera valideringsregler för valutaformat, skatteberäkningar och transaktionsgränser baserat på användarens plats, vilket säkerställer efterlevnad av lokala lagar.
Routing och Middleware: Använd metadata för att definiera rutter och middleware för webbapplikationer. Detta förenklar konfigurationen av din applikation och gör den mer underhållbar. Ett globalt distribuerat innehållsleveransnätverk (CDN) kan använda metadata för att definiera cachningspolicyer och routingregler baserat på typ av innehåll och användarens plats, vilket optimerar prestanda och minskar latens för användare över hela världen.
Auktorisering och Autentisering: Associera roller, behörigheter och autentiseringskrav med metoder och klasser, vilket underlättar deklarativa säkerhetspolicyer. Föreställ dig ett multinationellt företag med anställda på olika avdelningar och platser. Decorators kan definiera åtkomstkontrollregler baserat på användarens roll, avdelning och plats, vilket säkerställer att endast behörig personal kan komma åt känslig data och funktionalitet.

Bästa praxis

När du använder JavaScript Decorators, överväg följande bästa praxis:

Håll decorators enkla: Decorators bör vara fokuserade och utföra en enda, väldefinierad uppgift. Undvik komplex logik inom decorators för att bibehålla läsbarhet och underhållbarhet.
Använd Decorator-fabriker: Använd decorator-fabriker (decorator factories) för att möjliggöra konfigurerbara decorators. Detta gör dina decorators mer flexibla och återanvändbara.
Undvik sidoeffekter: Decorators bör primärt fokusera på att modifiera det dekorerade elementet eller associera metadata med det. Undvik att utföra komplexa sidoeffekter inom decorators som kan göra din kod svårare att förstå och felsöka.
Använd TypeScript: TypeScript ger utmärkt stöd för decorators, inklusive typkontroll och IntelliSense. Att använda TypeScript kan hjälpa dig att fånga fel tidigt och förbättra din utvecklingsupplevelse.
Dokumentera dina decorators: Dokumentera dina decorators tydligt för att förklara deras syfte och hur de ska användas. Detta gör det lättare för andra utvecklare att förstå och använda dina decorators korrekt.
Tänk på prestanda: Även om decorators är kraftfulla kan de också påverka prestandan. Var medveten om prestandaimplikationerna av dina decorators, särskilt i prestandakritiska applikationer.

Exempel på internationalisering med Decorators

Decorators kan hjälpa till med internationalisering (i18n) och lokalisering (l10n) genom att associera platsspecifik data och beteende med kodkomponenter:

Exempel: Lokaliserad datumformatering

import 'reflect-metadata';

interface DateFormatOptions {
  locale: string;
  options?: Intl.DateTimeFormatOptions;
}

const dateFormatKey = 'dateFormat';

function formatDate(options: DateFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(dateFormatKey, options, target, propertyKey);
  };
}

class Event {
  @formatDate({ locale: 'fr-FR', options: { year: 'numeric', month: 'long', day: 'numeric' } })
  startDate: Date;

  constructor(startDate: Date) {
    this.startDate = startDate;
  }

  getFormattedStartDate(): string {
    const options: DateFormatOptions = Reflect.getMetadata(dateFormatKey, Object.getPrototypeOf(this), 'startDate');
    return this.startDate.toLocaleDateString(options.locale, options.options);
  }
}

const event = new Event(new Date());
console.log(event.getFormattedStartDate()); // Skriver ut datum i franskt format

Exempel: Valutaformatering baserad på användarens plats

import 'reflect-metadata';

interface CurrencyFormatOptions {
  locale: string;
  currency: string;
}

const currencyFormatKey = 'currencyFormat';

function formatCurrency(options: CurrencyFormatOptions) {
  return function(target: any, propertyKey: string) {
    Reflect.defineMetadata(currencyFormatKey, options, target, propertyKey);
  };
}

class Product {
  @formatCurrency({ locale: 'de-DE', currency: 'EUR' })
  price: number;

  constructor(price: number) {
    this.price = price;
  }

  getFormattedPrice(): string {
    const options: CurrencyFormatOptions = Reflect.getMetadata(currencyFormatKey, Object.getPrototypeOf(this), 'price');
    return this.price.toLocaleString(options.locale, { style: 'currency', currency: options.currency });
  }
}

const product = new Product(99.99);
console.log(product.getFormattedPrice()); // Skriver ut pris i tyskt Euro-format

Framtidsutsikter

JavaScript decorators är en funktion under utveckling, och standarden är fortfarande under arbete. Några framtida överväganden inkluderar:

Standardisering: ECMAScript-standarden för decorators är fortfarande under utveckling. Allt eftersom standarden utvecklas kan det ske förändringar i syntax och beteende hos decorators.
Prestandaoptimering: När decorators blir mer allmänt använda kommer det att finnas ett behov av prestandaoptimeringar för att säkerställa att de inte påverkar applikationens prestanda negativt.
Verktygsstöd: Förbättrat verktygsstöd för decorators, såsom IDE-integration och felsökningsverktyg, kommer att göra det lättare för utvecklare att använda decorators effektivt.

Slutsats

JavaScript Decorators är ett kraftfullt verktyg för att implementera metadataprogrammering och förbättra beteendet i din kod. Genom att använda decorators kan du lägga till funktionalitet på ett rent, deklarativt och återanvändbart sätt. Detta leder till mer underhållbar, testbar och skalbar kod. Att förstå de olika typerna av decorators och hur man använder dem effektivt är avgörande för modern JavaScript-utveckling. Decorators, särskilt i kombination med Reflect Metadata API, låser upp en rad möjligheter, från dependency injection och validering till serialisering och routing, vilket gör din kod mer uttrycksfull och lättare att hantera.